<template>
  <section>
	  <main>
	  	<div class="pink"><span>请假申请</span></div>
	  	<div class="model">
	  		<div class="kong"></div>
	  		<div class="header">
	  		  <span class="title">基本信息</span>
	  		</div>
	  		<div class="body">
	  			<el-form ref="form" :model="form" label-width="80px">
	  				<!-- <el-col :span="10">
              <el-form-item label="年级">
                <el-select v-model="gradeSelect" @change="getClassData()">
                  <el-option v-for="(item, key) in gradeOption" :label="item"  :value="key"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="班级">
                <el-select v-model="classSelect" @change="getAllData()">
                  <el-option v-for="(item, key) in classOption" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="24">
              <el-form-item label="请假类型">
                <el-select v-model="typeSelect">
                  <el-option v-for="item in typeOption" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
	  			  <el-col :span="10">
		  			  <el-form-item label="开始时间">
		  			    <el-date-picker
                  format="yyyy-MM-dd"
                  ref="startDate"
  			          v-model="form.startDate"
  			          type="date"
  			          placeholder="选择日期">
			        	</el-date-picker>
		  			  </el-form-item>
	  			  </el-col>
	  			  <el-col :span="10">
		  			  <el-form-item label="结束时间">
		  			    <el-date-picker
                  format="yyyy-MM-dd"
                  ref="endDate"
                  v-model="form.endDate"
  			          type="date"
  			          placeholder="选择日期">
			        	</el-date-picker>
		  			  </el-form-item>
	  			  </el-col>
            <el-col :span="24">
              <el-form-item label="请假时长">
                <el-select v-model="form.times">
                  <el-option v-for="item in timesArray" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
	  			  <el-col :span="20">
		  			  <el-form-item label="请假理由">
		  			    <el-input type="textarea" v-model="form.liyou" :rows="4"></el-input>
		  			  </el-form-item>
	  			  </el-col>
	  			  <el-col :span="24">
		  			  <div class="uploadImg">
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :auto-upload='false'
                  :multiple='true'
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog v-model="dialogVisible" :modal-append-to-body="false" size="tiny">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>     
              </div>
	  			  </el-col>
	  			  <el-col :span="8">
              <el-form-item label="审批人">
                <el-input v-model="form.shenpi"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <div class="kong1"></div>
            </el-col>
	  			  <el-col :span="24">
		  			  <div class="bottom">
		  			  	<button class="btn btn-danger" @click="keepData">保存</button>
		  			  </div>
	  			  </el-col>
	  			</el-form>
	  		</div>
	  	</div>
	  </main>	
  </section>
</template>

<script>
export default {
  data () {
    return {
      typeSelect: null,
      typeOption: [],
      gradeSelect: null,
      gradeOption: [],
      classSelect: null,
      classOption: [],
      dialogImageUrl: null,
      dialogVisible: false,
      form: {
        id: null,
        startDate: null,
        endDate: null,
        liyou: null,
        type: null,
        times: null,
        shenpi: null
      }
    }
  },
  mounted () {
    this.getGradeData()
    this.$http.post(this._httpUrl + 'student/leave/type', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
      if (response.body.code === '000') {
        this.typeOption = response.data.data
      } else if (response.body.code === '887') {
        this.$router.push('/')
      } else if (response.body.code === '889') {
        this.$router.push('/')
      }
    })
  },
  methods: {
    subAll () {
      this.xtoken = {'yxt-xtoken': localStorage.xtoken}
      this.$http.post(this._httpUrl + 'studentleave/leave/apply', {
        grade: this.gradeSelect,
        clazz: this.classSelect,
        studentId: this.form.id,
        studentName: this.form.name,
        startTime: this.form.sTime,
        endTime: this.form.eTime,
        leaveType: this.typeSelect,
        leaveReason: this.form.liyou,
        parentId: null,
        attachs: []
      }, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getAllData () {
      if (this.classSelect !== null) {
        this.$http.post(this._httpUrl + 'studentInfo/listQuery', {grade: this.gradeSelect, clazz: this.classSelect, rows: this.total}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
          if (response.ok) {
            this.studentData = response.data.data.rows
            this.restaurants = this.studentData
            for (var i = 0; i < this.studentData.length; i++) {
              this.restaurants[i].value = this.studentData[i].name
            }
          }
        })
      }
    },
    keyInput () {
      if (this.studentData.length !== 0) {
        for (var i = 0; i < this.studentData.length; i++) {
          if (this.form.name === this.studentData[i].name) {
            this.form.id = this.studentData[i].id
          }
        }
      }
    },
    keepData () {
      this.form.startTime = this.$refs.startDate.displayValue
      this.form.endTime = this.$refs.endDate.displayValue
      console.log(this.form.startTime)
      console.log(this.form.endTime)
    },
    querySearch (queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    submitUpload () {
      this.$refs.upload.submit()
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    getGradeData () {
      this.$http.post(this._httpUrl + 'public/grade/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.gradeOption = response.data.data.gradeMap
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getClassData () {
      this.classSelect = null
      this.$http.post(this._httpUrl + 'public/class/query?grade=' + this.gradeSelect, {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.classOption = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    }
  }
}
</script>

<style scoped>
	div[data-v-38d76342] ul
  {
    position: relative;
    left: 12%;
  }
  div[data-v-38d76342]
  {
  	padding-bottom: 10px;
  }
	.el-upload--picture-card
	{
	  /*margin-left: 16%; */
	  margin-top: 40px;
	  width: 80px; height: 80px;
	}
	/*.el-upload--picture-card i
  {
    position: relative; top: -28px;
  }*/
  select{
    width: 30%;
  }
</style>
<style lang="less" scoped>
@import '/static/css/all-use.css';
@import '/static/css/material-dashboard.css';
  .kong1{
    padding: 10px;
  }
	main{
		position: relative;
		.pink{
		  width: 104px;
		  height: 64px;
		  position: absolute;
		  left: 3%;
		  top: -20px;
		  background: #E12C6C;
		  border-radius: 4px;
		  text-align: center;
		  line-height: 70px;
		  color: #fff;
		  z-index: 2;
		}
		.model{
			width: 98%;
			background: #FFF;
			margin-left: 1%;
			margin-top: 60px;
			border-radius: 5px;
			padding-top: 10px;
			overflow: hidden;
		  .title{
		    margin-left: 12%;
		  }
		  .kong{
		  	padding: 20px;
		  }
		  .header{
        height: 24px;
        border-bottom: 2px solid #D7D7D7;
        padding: 30px 0 10px 0;
        margin-left: 10%;
        margin-bottom: 10px;
        .title{
          display: inline-block;
          height: 24px;
          color: #FB7862;
          border-bottom: 2px solid #FB7862;
          padding: 0 0 10px 0;
          margin-left: 0;
          padding-bottom: 10px;
        }
      }
		  .body{
		  	width: 80%;
		  	margin-left: 10%;
		  	margin-right: 10px;
		  	padding: 30px 0 10px 0;
		  }
		  .bottom{
		    margin-top: 20px;
		    padding: 8px 0;
		    text-align: center;
		  }
		}
	}
  .uploadImg{
    min-height: 163px;
    margin-left: 10%;
  }
</style>
